<!-- chat/templates/chat/room.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Chat Room</title>
  </head>
  <body>
    <textarea id="chat-log" cols="100" rows="20"></textarea><br />
    <input id="chat-message-input" type="text" size="100" /><br />
    <input id="chat-message-submit" type="button" value="Send" />
    {{ room_name|json_script:"room-name" }}
    <script>
      const roomName = JSON.parse(
        document.getElementById("room-name").textContent
      );

      const chatSocket = new WebSocket(
        "ws://" + window.location.host + "/ws/chat/" + roomName + "/"
      );

      chatSocket.onmessage = function (e) {
        const data = JSON.parse(e.data);
        document.querySelector("#chat-log").value += data.message + "\n";
      };

      chatSocket.onclose = function (e) {
        console.error("Chat socket closed unexpectedly");
      };

      document.querySelector("#chat-message-input").focus();
      document.querySelector("#chat-message-input").onkeyup = function (e) {
        if (e.keyCode === 13) {
          // enter, return
          document.querySelector("#chat-message-submit").click();
        }
      };

      document.querySelector("#chat-message-submit").onclick = function (e) {
        const messageInputDom = document.querySelector("#chat-message-input");
        const message = messageInputDom.value;
        chatSocket.send(
          JSON.stringify({
            message: message,
          })
        );
        messageInputDom.value = "";
      };
    </script>
  </body>
</html>
